<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>泰坦尼克预测</title>
    <link rel="stylesheet" href='{{ url_for( "static", filename="bootstrap/css/bootstrap.min.css" ) }}'>
    <link rel="stylesheet" href='{{ url_for( "static", filename="index.css" ) }}'>
    <script src="{{url_for('static',filename='jquery.min.js')}}"></script>
</head>
<body>
<div class="box">
    <div class="page-header">
        <h1>泰坦尼克生存问题预测 <small>python</small></h1>
    </div>
    <form class="form">
        <fieldset>
            <legend>乘客信息登记</legend>
            <div>
                <label for="Pclass">Pclass（客舱等级）</label>
                <select name="Pclass" id="Pclass">
                    <option value="1">一等舱</option>
                    <option value="2">二等舱</option>
                    <option value="3">三等舱</option>
                </select>
            </div>
            <div>
                <label for="Name">Name（乘客姓名）</label>
                <select name="Name" id="Name1">
                    <option value="Capt">Capt</option>
                    <option value="Col">Col</option>
                    <option value="Major">Major</option>
                    <option value="Jonkheer">Jonkheer</option>
                    <option value="Don">Don</option>
                    <option value="Sir">Sir</option>
                    <option value="Dr">Dr</option>
                    <option value="Rev">Rev</option>
                    <option value="the Countess">the Countess</option>
                    <option value="Dona">Dona</option>
                    <option value="Mme">Mme</option>
                    <option value="Mlle">Mlle</option>
                    <option value="Ms">Ms</option>
                    <option value="Mr">Mr</option>
                    <option value="Mrs">Mrs</option>
                    <option value="Miss">Miss</option>
                    <option value="Master">Master</option>
                    <option value="Lady">Lady</option>
                </select>
                <input type="text" name="Name" id="Name2" placeholder="姓氏"/>
                <input type="text" name="Name" id="Name3" placeholder="名称"/>
            </div>
            <div>
                <label for="Sex">Sex（乘客性别）</label>
                <lable><input type="radio" name="Sex" value="female" checked/>女</lable>
                <lable><input type="radio" name="Sex" value="male"/>男</lable>
            </div>
            <div>
                <label for="Age">Age（乘客年龄）</label>
                <input type="number" name="Age" id="Age"/>
            </div>
            <div>
                <label for="SibSp">SibSp（乘客兄弟姐妹和配偶数）</label>
                <input type="number" name="SibSp" id="SibSp"/>
            </div>
            <div>
                <label for="Parch">Parch（乘客父母子女数）</label>
                <input type="number" name="Parch" id="Parch"/>
            </div>
            <div>
                <label for="Ticket">Ticket（乘客票号）</label>
                <input type="text" name="Ticket" id="Ticket"/>
            </div>
            <div>
                <label for="Fare">Fare（船票价格）</label>
                <input type="number" name="Fare" id="Fare"/>
            </div>
            <div>
                <label for="Cabin">Cabin（乘客客舱号）</label>
                <select name="Cabin" id="Cabin1">
                    <option value="A">A</option>
                    <option value="B">B</option>
                    <option value="C">C</option>
                    <option value="D">D</option>
                    <option value="E">E</option>
                    <option value="F">F</option>
                    <option value="G">G</option>
                    <option value="H">H</option>
                </select>
                <input type="number" name="Cabin" id="Cabin2" placeholder="客舱号"/>
            </div>
            <div>
                <label for="Embarked">Embarked（乘客登船港口）</label>
                <select name="Embarked" id="Embarked">
                    <option value="S">英国 南安普顿港 （Southampton）</option>
                    <option value="C">爱尔兰 科夫港 （Cobh）</option>
                    <option value="Q">法国 瑟堡-奥克特维尔港 （Cherbourg-Octeville）</option>
                </select>
            </div>
            <button type="button" class="click btn btn-success">确定乘客信息</button>
        </fieldset>
    </form>
    <div class="jumbotron">
        <h2 class="result">Result</h2>
        <p class="info">请填写乘客信息进行生还概率预测</p>
    </div>
</div>
<script>
    $('.click').click(function () {
        let Pclass = $("#Pclass").val(),
            Name = $("#Name2").val() + "," + $("#Name1").val() + "." + $("#Name3").val(),
            Sex = $("input[name=Sex]:checked").val(),
            Age = $("#Age").val(),
            SibSp = $("#SibSp").val(),
            Parch = $("#Parch").val(),
            Ticket = $("#Ticket").val(),
            Fare = $("#Fare").val(),
            Cabin = $("#Cabin1").val() + "" + $("#Cabin2").val(),
            Embarked = $("#Embarked").val()
        $.post('/api/prediction', {
                Pclass: Pclass,
                Name: Name,
                Sex: Sex,
                Age: Age,
                SibSp: SibSp,
                Parch: Parch,
                Ticket: Ticket,
                Fare: Fare,
                Cabin: Cabin,
                Embarked: Embarked
            }, res => {
                if (res.code == 200) {
                    let result, save, dia
                    res.data.res == 1 ? result = '幸运生还' : result = '不幸遇难'
                    save = (res.data.save * 100).toFixed(2) + "%"
                    die = (res.data.die * 100).toFixed(2) + "%"
                    $(".result").html(result)
                    $(".info").html(`尊敬的乘客${Name},根据预测，你将在泰坦尼克号沉船事件中${result}，您幸存的概率是${save}，您遇难的概率是${die}`)
                }
            }
        )
    })
</script>
</body>
</html>